<template>
	<view >
		<u-navbar leftIconColor="#000000" :titleStyle="{ color: '#000000' }" :bgColor="bgColor" title="提现账户"
			:placeholder="true" :autoBack="true"></u-navbar>
		<view class="note">
		
		</view>
		<view class="" style="width: 92%;margin: 0 auto;padding-top: 15px;z-index: 1;position: relative;">
			<view class="flex" style="justify-content: space-around;align-items: flex-start;">
				<view class="flex" style="flex-direction: column;al">
					<image style="width: 30px;height: 30px;" src="/static/font/31.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #0C3283;padding-top: 10px;">实名认证</text>
				</view>
				<view class="" style="width: 54px;height: 3px;background: #D4E5F8;border-radius: 70px 70px 70px 70px;margin-top: 15px;">
					
				</view>
				<view class="flex" style="flex-direction: column;">
					<image style="width: 30px;height: 30px;" src="/static/font/34.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #999999;padding-top: 10px;">绑定支付宝</text>
				</view>
				<view class="" style="width: 54px;height: 3px;background: #D4E5F8;border-radius: 70px 70px 70px 70px;margin-top: 15px;">
					
				</view>
				<view class="flex" style="flex-direction: column;">
					<image style="width: 30px;height: 30px;" src="/static/font/33.png" mode=""></image>
					<text style="font-size: 10px;font-weight: 500;color: #999999;padding-top: 10px;">填写银行卡</text>
				</view>
			</view>
			<view style="" style="padding-top: 12px;">
				<view style="padding-bottom: 15px;">
					<view style="">
						<view style="padding: 15px ;border-bottom: 1px solid #EBEDEE;background-color: #fff;border-radius: 10px;">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="ali_name" placeholder="请输入真实姓名" border="none">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入真实姓名" border="none">
									<!-- #endif -->
									<u--text class="tit" text="真实姓名" slot="prefix" margin="0 15px 0 0"
										type="tips"></u--text>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
						<view style="padding: 15px ;background-color: #fff;margin-top: 15px;border-radius: 10px;">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input v-model="ali_code" placeholder="请输入支付宝账号" border="none">
								<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="请输入支付宝账号" border="none">
									<!-- #endif -->
									<u--text class="tit" text="支付宝账号" slot="prefix" margin="0 15px 0 0"
										type="tips"></u--text>
									<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
			
					</view>
			
				</view>
				<view class="flex">
					<u-icon name="info-circle-fill" color="#FFA724" size="18"></u-icon>
					<view style="margin-left: 3px;font-size: 14px;color: #FFA724;font-weight: 400;">请绑定本人支付宝账号，若错误将导致无法打款
					</view>
				</view>
			
			
			</view>
			<view style="margin-top: 15px;">
				<u-button @click="step" shape='circle' type="primary" text="下一步"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ali_name:'',
				ali_code:'',
				ainfo:'',
				bgColor: 'rgba(255,255,255,0)',
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = 'rgba(255,255,255,1)'
			} else {
				this.bgColor = 'rgba(255,255,255,0)'
			}
		},
		onLoad() {
			// this.info()
		},
		methods: {
			async info(){
				let res = await this.$http.index.my_index()
				console.log(res);
				if(res.code == 1){
					this.ainfo = res.data.userinfo
					this.ali_code = this.ainfo.alipay_account
					this.ali_name = this.ainfo.card_name
				}
			},
			async step() {
				// let res = await this.$http.index.bindBank({
				// 	bank_card:'',
				// 	bank_name:'',
				// 	alipay_account:this.ali_code
				// })
				// if(res.code == 1){
					uni.navigateTo({
						url: '/pages/me/bank?ali_code=' + encodeURIComponent(JSON.stringify(this.ali_code)) + '&ali_name=' + encodeURIComponent(JSON.stringify(this.ali_code))
					})
				// }
				
			},
		}
	}
</script>
<style scoped lang="scss">
	/deep/ .uicon-info-circle-fill {
		// line-height: normal !important;
	}

	/deep/.u-text__value--tips {
		font-weight: 400 !important;
		color: #1D1F20 !important;
	}

	/deep/ .u-button--primary {
		background-color: #2447FF;
		border-color: #2447FF,
	}
	.note {
		background-image: url('@/static/font/21.png');
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: 100% 100%;
	}
	
</style>
<style>
	page {
		background-color: #F7F9FA;
	}
</style>